<template>
	<div class="evidence-add-container">
		<el-card shadow="hover" body-style="padding:8px; ">
			<el-row justify="end">
				<!--	<el-button type="primary" icon="el-icon-unlock" size="mini">保存入库</el-button>-->
			</el-row>
			<div class="card-header" style="width: 100%; margin-top: 5px; border-top: 1px solid AliceBlue">
				<el-row style="margin-bottom: 15px; margin-left: 15px">
					<div style="height: 40px; width: 5px; background: green"></div>
					<div style="margin-top: 10px; margin-left: 20px; font-size: 16px">案件信息</div>
				</el-row>
				<AddCase ref="refAddCase" :key="new Date().getTime()" :formInline="formInlineCase" :options="options" />
			</div>
			<div class="card-header" style="width: 100%; margin-top: 5px; border-top: 1px solid AliceBlue">
				<el-row>
					<div style="height: 40px; width: 5px; background: green"></div>
					<div style="margin-top: 10px; margin-left: 20px; font-size: 16px">物品信息</div>
				</el-row>

				<AddEvi ref="refAddEvi" :formInline="formInlineEvi" :key="new Date().getTime()" :options="options" />
				<el-row justify="center" style="margin-top: 10px">
					<el-button type="primary" icon="el-icon-box" @click="temporaryAdd(true)" align="center" size="medium">暂存</el-button>
					<el-button type="primary" icon="el-icon-check" size="medium" @click="onSave">保存</el-button>
				</el-row>
			</div>
			<div class="card-header" style="width: 100%; margin-top: 15px; border-top: 1px solid AliceBlue">
				<el-row>
					<div style="height: 40px; width: 5px; background: green"></div>
					<div style="margin-top: 10px; margin-left: 20px; font-size: 16px">暂存物品</div>
				</el-row>
				<el-table
					ref="refTable"
					:data="tableData"
					:default-sort="{ prop: 'name', order: 'descending' }"
					size="mini"
					style="width: 100%"
					:row-class-name="tableRowClassName"
				>
					<!-- <el-table-column align="center" type="selection" width="55" /> -->
					<el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
					<el-table-column align="center" sortable label="物品名称/数量" show-overflow-tooltip>
						<template #default="scope">{{ `${scope.row.name}/${scope.row.quantity}` }}</template>
					</el-table-column>
					<el-table-column align="center" property="className" sortable label="物品类别" show-overflow-tooltip />
					<el-table-column align="center" sortable label="颜色/获取时间" show-overflow-tooltip>
						<template #default="scope">{{ `${scope.row.extractionPersonName}/${dateFormat(scope.row.extractionDateTime)}` }}</template>
					</el-table-column>
					<el-table-column align="center" property="extractMethod" sortable label="获取方式" show-overflow-tooltip />
					<el-table-column align="center" property="extractionParts" sortable label="产地" show-overflow-tooltip />
					<el-table-column align="center" label="操作" width="150px">
						<template #default="scope">
							<el-button type="danger" plain size="mini" @click="onDel(scope.$index, tableData)">删除</el-button>
							<el-button type="primary" plain size="mini" @click="onEdit(scope.row, scope.$index)">修改</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted, getCurrentInstance, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import AddCase from '/@/views/evidence/add/component/addCase.vue';
import AddEvi from '/@/views/evidence/add/component/addEvidence.vue';
import { postCaseEvidence } from '/@/api/case/index';
import { useRoute, useRouter } from 'vue-router';
import { dateFormat, initDic } from '/@/common';
export default defineComponent({
	name: 'AddEvidence',
	components: { AddCase, AddEvi },
	activated(){
		this.formInlineEvi.name = '';
		this.formInlineEvi.class = '';
		this.formInlineEvi.rfid = '';
		this.formInlineEvi.quantity = 1;
		this.formInlineEvi.unit = '';
		this.formInlineEvi.source = '';
		this.formInlineEvi.shape = '';
		this.formInlineEvi.extractionOrganName = '';
		this.formInlineEvi.extractionPersonName = '';
		this.formInlineEvi.extractionDateTime = '';
		this.formInlineEvi.extractMethod = '';
		this.formInlineEvi.caiQuChuoSiDate = null;
		this.formInlineEvi.extractionParts = '';
		this.formInlineEvi.describe = '';
		this.formInlineEvi.category = '';
		this.formInlineEvi.status = 1;
		this.formInlineEvi.sourceName = '';
		
		this.formInlineCase.caseNo = '';
		this.formInlineCase.inspectionNo = '';
		this.formInlineCase.caseName = '';
		this.formInlineCase.caseTime = '';
		this.formInlineCase.caseTypeCode = '';
		this.formInlineCase.caseTypeName = '';
		this.formInlineCase.briefCase = '';
		this.formInlineCase.casePlace = '';
		this.formInlineCase.hostUserName = '';
		this.formInlineCase.hostUserOrganName = '';
	},
	setup() {
		const router = useRouter();
		const route = useRoute();
		const { proxy } = getCurrentInstance() as any;
		const state = reactive({
			formInline: {},
			tableData: [],
			options: {
				ajlbs: [],
				tqffs: [],
				tqbws: [],
				tqrs: [],
				tqdws: [],
				wzlys: [],
				wzlbs: [],
				dics: [],
				wzdws: [],
				ajxz:[],
			},
			formInlineEvi: {
				name: '',
				class: '',
				rfid: '',
				quantity: 1,
				unit: '',
				source: '',
				shape: '',
				extractionOrganName: '',
				extractionPersonName: '',
				extractionDateTime: '',
				extractMethod: '',
				caiQuChuoSiDate: null,
				extractionParts: '',
				describe: '',
				category: '',
				status: 1,
				sourceName: '',
			},
			formInlineCase: {
				caseNo: '',
				inspectionNo: '',
				caseName: '',
				caseTime: '',
				caseTypeCode: '',
				caseTypeName: '',
				briefCase: '',
				casePlace: '',
				hostUserName: '',
				hostUserOrganName: '',
			},
		});

		const refAddCase = ref();
		const refAddEvi = ref();
		function tableRowClassName({ row, rowIndex }) {
			if (rowIndex === 1) {
				return 'warning-row';
			} else if (rowIndex === 3) {
				return 'success-row';
			}
			return '';
		}

		

		function temporaryAdd(isClean) {
			refAddEvi.value.$refs['refAddEvidenceForm'].validate((valid) => {
				if (valid) {
					const obj = { ...state.formInlineEvi };
					obj.sourceName = state.options.wzlys.find((x) => x.value == obj.source)?.label;
					state.tableData.push(obj);

					if(isClean)
					   restForm(1);
					
					state.formInlineEvi.shapeLs = [];
					state.formInlineEvi.quantity = 1;
					state.formInlineEvi.status = 1;
					
					return true;
				} else {
					return false;
				}
			});
		}
		(function () {})();
		initDic(state.options);
		onMounted(() => {});
		function restForm(type) {
			if (type == 1) {
				Object.keys(state.formInlineEvi).forEach((key) => (state.formInlineEvi[key] = ''));
			} else if (type == 2) {
				Object.keys(state.formInlineEvi).forEach((key) => (state.formInlineEvi[key] = ''));
				Object.keys(state.formInlineCase).forEach((key) => (state.formInlineCase[key] = ''));
			}
			state.formInlineEvi.extractionDateTime = new Date();
		}
		function onDel(index, rows) {
			ElMessageBox.confirm('是否移除当前物品?', '警告', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					rows.splice(index, 1);
					ElMessage({
						type: 'success',
						message: '移除成功',
					});
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: '删除失败',
					});
				});
		}
		function onEdit(row, index) {
			state.tableData.splice(index, 1);
			Object.assign(state.formInlineEvi, row);
		}
		async function onSave() {
			
			await refAddCase.value.refAddCaseForm.validate((valid) => {
				if (valid) {

					if (state.tableData.length < 1) {
						temporaryAdd(false);
					}

					if (state.tableData.length < 1) {
						return false;
					}
					state.formInlineCase.caseTypeName = state.options.ajlbs.find((x) => x.value == state.formInlineCase.caseTypeCode)?.label;
					const form = { ...state.formInlineCase };
					for(var i = 0;i < state.tableData.length; i ++){
						var _r = state.tableData[i];
						_r.shape = (_r.shapeLs || "").toString();
					}
					form.evidences = state.tableData;
					postCaseEvidence(form)
						.then((res) => {
							if (res.success) {
								ElMessage({ message: '操作成功', type: 'success' });
								router.push({ path: '/evidence/unit/details', query: { caseid: res.data } });
								state.tableData=[];
								restForm(2);
								closeCurrentTagsView();
							} else {
								ElMessage({ message: '操作失败', type: 'error' });
							}
						})
						.catch(function (err) {});
				}
			});
		}
		const closeCurrentTagsView = () => {
			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
		};
		return {
			state,
			onDel,
			onEdit,
			dateFormat,
			refAddCase,
			refAddEvi,
			temporaryAdd,
			tableRowClassName,
			onSave,
			...toRefs(state),
		};
	},
});
</script>
